{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "fed6d06a-c5a6-49cd-949c-7d4c9ed9b8a1",
   "metadata": {},
   "source": [
    "# Layer Labels (Annotations) in `geomCrossbar`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "bd28eb0e-f782-4b58-a250-c2dde64c16e4",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "            <div id=\"kotlin_out_0\"></div>\n",
       "            <script type=\"text/javascript\">\n",
       "                            if(!window.kotlinQueues) {\n",
       "                window.kotlinQueues = {};\n",
       "            }\n",
       "            if(!window.kotlinQueues[\"DataFrame\"]) {\n",
       "                var resQueue = [];\n",
       "                window.kotlinQueues[\"DataFrame\"] = resQueue;\n",
       "                window[\"call_DataFrame\"] = function(f) {\n",
       "                    resQueue.push(f);\n",
       "                }\n",
       "            }\n",
       "            (function (){\n",
       "                var modifiers = [(function(script) {\n",
       "    script.src = \"https://cdn.jsdelivr.net/gh/Kotlin/dataframe@3db46ccccaa1291c0627307d64133317f545e6ae/core/src/main/resources/init.js\"\n",
       "    script.type = \"text/javascript\";\n",
       "})];\n",
       "                var e = document.getElementById(\"kotlin_out_0\");\n",
       "                modifiers.forEach(function (gen) {\n",
       "                    var script = document.createElement(\"script\");\n",
       "                    gen(script)\n",
       "                    script.addEventListener(\"load\", function() {\n",
       "                        window[\"call_DataFrame\"] = function(f) {f();};\n",
       "                        window.kotlinQueues[\"DataFrame\"].forEach(function(f) {f();});\n",
       "                        window.kotlinQueues[\"DataFrame\"] = [];\n",
       "                    }, false);\n",
       "                    script.addEventListener(\"error\", function() {\n",
       "                        window[\"call_DataFrame\"] = function(f) {};\n",
       "                        window.kotlinQueues[\"DataFrame\"] = [];\n",
       "                        var div = document.createElement(\"div\");\n",
       "                        div.style.color = 'darkred';\n",
       "                        div.textContent = 'Error loading resource DataFrame';\n",
       "                        document.getElementById(\"kotlin_out_0\").appendChild(div);\n",
       "                    }, false);\n",
       "                    \n",
       "                    e.appendChild(script);\n",
       "                });\n",
       "            })();\n",
       "            </script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "                <style>\n",
       "                :root {\n",
       "    --background: #fff;\n",
       "    --background-odd: #f5f5f5;\n",
       "    --background-hover: #d9edfd;\n",
       "    --header-text-color: #474747;\n",
       "    --text-color: #848484;\n",
       "    --text-color-dark: #000;\n",
       "    --text-color-medium: #737373;\n",
       "    --text-color-pale: #b3b3b3;\n",
       "    --inner-border-color: #aaa;\n",
       "    --bold-border-color: #000;\n",
       "    --link-color: #296eaa;\n",
       "    --link-color-pale: #296eaa;\n",
       "    --link-hover: #1a466c;\n",
       "}\n",
       "\n",
       ":root[theme=\"dark\"], :root [data-jp-theme-light=\"false\"], .dataframe_dark{\n",
       "    --background: #303030;\n",
       "    --background-odd: #3c3c3c;\n",
       "    --background-hover: #464646;\n",
       "    --header-text-color: #dddddd;\n",
       "    --text-color: #b3b3b3;\n",
       "    --text-color-dark: #dddddd;\n",
       "    --text-color-medium: #b2b2b2;\n",
       "    --text-color-pale: #737373;\n",
       "    --inner-border-color: #707070;\n",
       "    --bold-border-color: #777777;\n",
       "    --link-color: #008dc0;\n",
       "    --link-color-pale: #97e1fb;\n",
       "    --link-hover: #00688e;\n",
       "}\n",
       "\n",
       "p.dataframe_description {\n",
       "    color: var(--text-color-dark);\n",
       "}\n",
       "\n",
       "table.dataframe {\n",
       "    font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n",
       "    font-size: 12px;\n",
       "    background-color: var(--background);\n",
       "    color: var(--text-color-dark);\n",
       "    border: none;\n",
       "    border-collapse: collapse;\n",
       "}\n",
       "\n",
       "table.dataframe th, td {\n",
       "    padding: 6px;\n",
       "    border: 1px solid transparent;\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       "table.dataframe th {\n",
       "    background-color: var(--background);\n",
       "    color: var(--header-text-color);\n",
       "}\n",
       "\n",
       "table.dataframe td {\n",
       "    vertical-align: top;\n",
       "    white-space: nowrap;\n",
       "}\n",
       "\n",
       "table.dataframe th.bottomBorder {\n",
       "    border-bottom-color: var(--bold-border-color);\n",
       "}\n",
       "\n",
       "table.dataframe tbody > tr:nth-child(odd) {\n",
       "    background: var(--background-odd);\n",
       "}\n",
       "\n",
       "table.dataframe tbody > tr:nth-child(even) {\n",
       "    background: var(--background);\n",
       "}\n",
       "\n",
       "table.dataframe tbody > tr:hover {\n",
       "    background: var(--background-hover);\n",
       "}\n",
       "\n",
       "table.dataframe a {\n",
       "    cursor: pointer;\n",
       "    color: var(--link-color);\n",
       "    text-decoration: none;\n",
       "}\n",
       "\n",
       "table.dataframe tr:hover > td a {\n",
       "    color: var(--link-color-pale);\n",
       "}\n",
       "\n",
       "table.dataframe a:hover {\n",
       "    color: var(--link-hover);\n",
       "    text-decoration: underline;\n",
       "}\n",
       "\n",
       "table.dataframe img {\n",
       "    max-width: fit-content;\n",
       "}\n",
       "\n",
       "table.dataframe th.complex {\n",
       "    background-color: var(--background);\n",
       "    border: 1px solid var(--background);\n",
       "}\n",
       "\n",
       "table.dataframe .leftBorder {\n",
       "    border-left-color: var(--inner-border-color);\n",
       "}\n",
       "\n",
       "table.dataframe .rightBorder {\n",
       "    border-right-color: var(--inner-border-color);\n",
       "}\n",
       "\n",
       "table.dataframe .rightAlign {\n",
       "    text-align: right;\n",
       "}\n",
       "\n",
       "table.dataframe .expanderSvg {\n",
       "    width: 8px;\n",
       "    height: 8px;\n",
       "    margin-right: 3px;\n",
       "}\n",
       "\n",
       "table.dataframe .expander {\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "}\n",
       "\n",
       "/* formatting */\n",
       "\n",
       "table.dataframe .null {\n",
       "    color: var(--text-color-pale);\n",
       "}\n",
       "\n",
       "table.dataframe .structural {\n",
       "    color: var(--text-color-medium);\n",
       "    font-weight: bold;\n",
       "}\n",
       "\n",
       "table.dataframe .dataFrameCaption {\n",
       "    font-weight: bold;\n",
       "}\n",
       "\n",
       "table.dataframe .numbers {\n",
       "    color: var(--text-color-dark);\n",
       "}\n",
       "\n",
       "table.dataframe td:hover .formatted .structural, .null {\n",
       "    color: var(--text-color-dark);\n",
       "}\n",
       "\n",
       "table.dataframe tr:hover .formatted .structural, .null {\n",
       "    color: var(--text-color-dark);\n",
       "}\n",
       "\n",
       "\n",
       "                </style>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "   <div id=\"ORYLwI\"></div>\n",
       "   <script type=\"text/javascript\" data-lets-plot-script=\"library\">\n",
       "       if(!window.letsPlotCallQueue) {\n",
       "           window.letsPlotCallQueue = [];\n",
       "       }; \n",
       "       window.letsPlotCall = function(f) {\n",
       "           window.letsPlotCallQueue.push(f);\n",
       "       };\n",
       "       (function() {\n",
       "           var script = document.createElement(\"script\");\n",
       "           script.type = \"text/javascript\";\n",
       "           script.src = \"https://cdn.jsdelivr.net/gh/JetBrains/lets-plot@v4.7.0/js-package/distr/lets-plot.min.js\";\n",
       "           script.onload = function() {\n",
       "               window.letsPlotCall = function(f) {f();};\n",
       "               window.letsPlotCallQueue.forEach(function(f) {f();});\n",
       "               window.letsPlotCallQueue = [];\n",
       "               \n",
       "               \n",
       "           };\n",
       "           script.onerror = function(event) {\n",
       "               window.letsPlotCall = function(f) {};\n",
       "               window.letsPlotCallQueue = [];\n",
       "               var div = document.createElement(\"div\");\n",
       "               div.style.color = 'darkred';\n",
       "               div.textContent = 'Error loading Lets-Plot JS';\n",
       "               document.getElementById(\"ORYLwI\").appendChild(div);\n",
       "           };\n",
       "           var e = document.getElementById(\"ORYLwI\");\n",
       "           e.appendChild(script);\n",
       "       })();\n",
       "   </script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "            <div id=\"kotlin_out_1\"></div>\n",
       "            <script type=\"text/javascript\">\n",
       "                            if(!window.kotlinQueues) {\n",
       "                window.kotlinQueues = {};\n",
       "            }\n",
       "            if(!window.kotlinQueues[\"letsPlotJs\"]) {\n",
       "                var resQueue = [];\n",
       "                window.kotlinQueues[\"letsPlotJs\"] = resQueue;\n",
       "                window[\"call_letsPlotJs\"] = function(f) {\n",
       "                    resQueue.push(f);\n",
       "                }\n",
       "            }\n",
       "            (function (){\n",
       "                var modifiers = [(function(script) {\n",
       "    script.src = \"https://cdn.jsdelivr.net/gh/JetBrains/lets-plot@v4.7.0/js-package/distr/lets-plot.min.js\"\n",
       "    script.type = \"text/javascript\";\n",
       "})];\n",
       "                var e = document.getElementById(\"kotlin_out_1\");\n",
       "                modifiers.forEach(function (gen) {\n",
       "                    var script = document.createElement(\"script\");\n",
       "                    gen(script)\n",
       "                    script.addEventListener(\"load\", function() {\n",
       "                        window[\"call_letsPlotJs\"] = function(f) {f();};\n",
       "                        window.kotlinQueues[\"letsPlotJs\"].forEach(function(f) {f();});\n",
       "                        window.kotlinQueues[\"letsPlotJs\"] = [];\n",
       "                    }, false);\n",
       "                    script.addEventListener(\"error\", function() {\n",
       "                        window[\"call_letsPlotJs\"] = function(f) {};\n",
       "                        window.kotlinQueues[\"letsPlotJs\"] = [];\n",
       "                        var div = document.createElement(\"div\");\n",
       "                        div.style.color = 'darkred';\n",
       "                        div.textContent = 'Error loading resource letsPlotJs';\n",
       "                        document.getElementById(\"kotlin_out_1\").appendChild(div);\n",
       "                    }, false);\n",
       "                    \n",
       "                    e.appendChild(script);\n",
       "                });\n",
       "            })();\n",
       "            </script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%useLatestDescriptors\n",
    "%use dataframe\n",
    "%use lets-plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "81b92ef6-3141-482d-9adf-3313be01ed12",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Lets-Plot Kotlin API v.4.11.0. Frontend: Notebook with dynamically loaded JS. Lets-Plot JS v.4.7.0."
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "LetsPlot.getInfo()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "3ca6c904-55aa-454e-ab16-b121d9100acb",
   "metadata": {},
   "outputs": [],
   "source": [
    "val data = mapOf(\n",
    "    \"vertical_category\" to listOf(\"Without midline\", \"Above midline\", \"Below midline\", \"Above bar\", \"Below bar\"),\n",
    "    \"horizontal_category\" to listOf(\"Without midline\", \"Right of midline\", \"Left of midline\", \"Right of bar\", \"Left of bar\"),\n",
    "    \"ymin\" to listOf(0, 5, 5, 0, 20),\n",
    "    \"ymax\" to listOf(20, 20, 20, 2, 22),\n",
    "    \"y\" to listOf(null, 6, 19, 1, 21),\n",
    "    \"value\" to listOf(20, 15, 15, 2, 2)\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f3c89c08-29a5-4a30-bd6e-a5d157665d9b",
   "metadata": {},
   "source": [
    "### Automatic Text Positioning"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "66243efe-0ff5-4df2-8ee1-e864ed94dde6",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "   <div id=\"db6PiU\"></div>\n",
       "   <script type=\"text/javascript\" data-lets-plot-script=\"library\">\n",
       "       if(!window.letsPlotCallQueue) {\n",
       "           window.letsPlotCallQueue = [];\n",
       "       }; \n",
       "       window.letsPlotCall = function(f) {\n",
       "           window.letsPlotCallQueue.push(f);\n",
       "       };\n",
       "       (function() {\n",
       "           var script = document.createElement(\"script\");\n",
       "           script.type = \"text/javascript\";\n",
       "           script.src = \"https://cdn.jsdelivr.net/gh/JetBrains/lets-plot@v4.7.0/js-package/distr/lets-plot.min.js\";\n",
       "           script.onload = function() {\n",
       "               window.letsPlotCall = function(f) {f();};\n",
       "               window.letsPlotCallQueue.forEach(function(f) {f();});\n",
       "               window.letsPlotCallQueue = [];\n",
       "               \n",
       "               \n",
       "           };\n",
       "           script.onerror = function(event) {\n",
       "               window.letsPlotCall = function(f) {};\n",
       "               window.letsPlotCallQueue = [];\n",
       "               var div = document.createElement(\"div\");\n",
       "               div.style.color = 'darkred';\n",
       "               div.textContent = 'Error loading Lets-Plot JS';\n",
       "               document.getElementById(\"db6PiU\").appendChild(div);\n",
       "           };\n",
       "           var e = document.getElementById(\"db6PiU\");\n",
       "           e.appendChild(script);\n",
       "       })();\n",
       "   </script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/plot+json": {
       "apply_color_scheme": true,
       "output": {
        "data": {
         "horizontal_category": [
          "Without midline",
          "Right of midline",
          "Left of midline",
          "Right of bar",
          "Left of bar"
         ],
         "value": [
          20,
          15,
          15,
          2,
          2
         ],
         "vertical_category": [
          "Without midline",
          "Above midline",
          "Below midline",
          "Above bar",
          "Below bar"
         ],
         "y": [
          null,
          6,
          19,
          1,
          21
         ],
         "ymax": [
          20,
          20,
          20,
          2,
          22
         ],
         "ymin": [
          0,
          5,
          5,
          0,
          20
         ]
        },
        "data_meta": {
         "series_annotations": [
          {
           "column": "vertical_category",
           "type": "str"
          },
          {
           "column": "horizontal_category",
           "type": "str"
          },
          {
           "column": "ymin",
           "type": "int"
          },
          {
           "column": "ymax",
           "type": "int"
          },
          {
           "column": "y",
           "type": "int"
          },
          {
           "column": "value",
           "type": "int"
          }
         ]
        },
        "kind": "plot",
        "layers": [
         {
          "geom": "crossbar",
          "labels": {
           "annotation_size": 20,
           "variables": [
            "value"
           ]
          },
          "mapping": {},
          "position": "dodge",
          "stat": "identity"
         }
        ],
        "mapping": {
         "x": "vertical_category",
         "y": "y",
         "ymax": "ymax",
         "ymin": "ymin"
        },
        "scales": []
       },
       "output_type": "lets_plot_spec",
       "swing_enabled": true
      },
      "text/html": [
       "   <div id=\"rlTIiA\"></div>\n",
       "   <script type=\"text/javascript\" data-lets-plot-script=\"plot\">\n",
       "   \n",
       "   (function() {\n",
       "   // ----------\n",
       "   \n",
       "   const forceImmediateRender = false;\n",
       "   const responsive = false;\n",
       "   \n",
       "   let sizing = {\n",
       "       width_mode: \"MIN\",\n",
       "       height_mode: \"SCALED\",\n",
       "       width: null, \n",
       "       height: null \n",
       "   };\n",
       "   \n",
       "   const preferredWidth = document.body.dataset.letsPlotPreferredWidth;\n",
       "   if (preferredWidth !== undefined) {\n",
       "       sizing = {\n",
       "           width_mode: 'FIXED',\n",
       "           height_mode: 'SCALED',\n",
       "           width: parseFloat(preferredWidth)\n",
       "       };\n",
       "   }\n",
       "   \n",
       "   const containerDiv = document.getElementById(\"rlTIiA\");\n",
       "   let fig = null;\n",
       "   \n",
       "   function renderPlot() {\n",
       "       if (fig === null) {\n",
       "           const plotSpec = {\n",
       "\"mapping\":{\n",
       "\"x\":\"vertical_category\",\n",
       "\"y\":\"y\",\n",
       "\"ymin\":\"ymin\",\n",
       "\"ymax\":\"ymax\"\n",
       "},\n",
       "\"data\":{\n",
       "\"ymin\":[0.0,5.0,5.0,0.0,20.0],\n",
       "\"ymax\":[20.0,20.0,20.0,2.0,22.0],\n",
       "\"y\":[null,6.0,19.0,1.0,21.0],\n",
       "\"value\":[20.0,15.0,15.0,2.0,2.0],\n",
       "\"vertical_category\":[\"Without midline\",\"Above midline\",\"Below midline\",\"Above bar\",\"Below bar\"]\n",
       "},\n",
       "\"kind\":\"plot\",\n",
       "\"scales\":[],\n",
       "\"layers\":[{\n",
       "\"mapping\":{\n",
       "},\n",
       "\"stat\":\"identity\",\n",
       "\"position\":\"dodge\",\n",
       "\"geom\":\"crossbar\",\n",
       "\"labels\":{\n",
       "\"variables\":[\"value\"],\n",
       "\"annotation_size\":20\n",
       "},\n",
       "\"data\":{\n",
       "}\n",
       "}],\n",
       "\"data_meta\":{\n",
       "\"series_annotations\":[{\n",
       "\"type\":\"str\",\n",
       "\"column\":\"vertical_category\"\n",
       "},{\n",
       "\"type\":\"str\",\n",
       "\"column\":\"horizontal_category\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"ymin\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"ymax\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"y\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"value\"\n",
       "}]\n",
       "},\n",
       "\"spec_id\":\"1\"\n",
       "};\n",
       "           window.letsPlotCall(function() { fig = LetsPlot.buildPlotFromProcessedSpecs(plotSpec, containerDiv, sizing); });\n",
       "       } else {\n",
       "           fig.updateView({});\n",
       "       }\n",
       "   }\n",
       "   \n",
       "   const renderImmediately = \n",
       "       forceImmediateRender || (\n",
       "           sizing.width_mode === 'FIXED' && \n",
       "           (sizing.height_mode === 'FIXED' || sizing.height_mode === 'SCALED')\n",
       "       );\n",
       "   \n",
       "   if (renderImmediately) {\n",
       "       renderPlot();\n",
       "   }\n",
       "   \n",
       "   if (!renderImmediately || responsive) {\n",
       "       // Set up observer for initial sizing or continuous monitoring\n",
       "       var observer = new ResizeObserver(function(entries) {\n",
       "           for (let entry of entries) {\n",
       "               if (entry.contentBoxSize && \n",
       "                   entry.contentBoxSize[0].inlineSize > 0) {\n",
       "                   if (!responsive && observer) {\n",
       "                       observer.disconnect();\n",
       "                       observer = null;\n",
       "                   }\n",
       "                   renderPlot();\n",
       "                   if (!responsive) {\n",
       "                       break;\n",
       "                   }\n",
       "               }\n",
       "           }\n",
       "       });\n",
       "       \n",
       "       observer.observe(containerDiv);\n",
       "   }\n",
       "   \n",
       "   // ----------\n",
       "   })();\n",
       "   \n",
       "   </script>                <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" display=\"block\" class=\"plt-container\" id=8ff59b2c-90be-43c6-80e5-b6c0e945daac width=\"100%\" height=\"100%\" style=\"max-width: 600.0px; max-height: 400.0px;\" viewBox=\"0 0 600.0 400.0\" preserveAspectRatio=\"xMinYMin meet\">\n",
       "  <style type=\"text/css\">\n",
       "  .plt-container {\n",
       "   font-family: sans-serif;\n",
       "   user-select: none;\n",
       "   -webkit-user-select: none;\n",
       "   -moz-user-select: none;\n",
       "   -ms-user-select: none;\n",
       "}\n",
       "text {\n",
       "   text-rendering: optimizeLegibility;\n",
       "}\n",
       "#pk2IWyF .plot-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 16.0px;\n",
       "\n",
       "}\n",
       "#pk2IWyF .plot-subtitle {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pk2IWyF .plot-caption {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pk2IWyF .hyperlink-element {\n",
       "fill: #118ed8;\n",
       "font-weight: normal;\n",
       "   font-style: normal;\n",
       "}\n",
       "#pk2IWyF .legend-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pk2IWyF .legend-item {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pk2IWyF .axis-title-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pk2IWyF .axis-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dos0Eee .axis-tooltip-text-x {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pk2IWyF .axis-title-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pk2IWyF .axis-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dos0Eee .axis-tooltip-text-y {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pk2IWyF .facet-strip-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pk2IWyF .facet-strip-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dos0Eee .tooltip-text {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dos0Eee .tooltip-title {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dos0Eee .tooltip-label {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "\n",
       "  </style>\n",
       "  <g id=\"pk2IWyF\">\n",
       "    <path fill-rule=\"evenodd\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" d=\"M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z\">\n",
       "    </path>\n",
       "    <g transform=\"translate(21.0 6.0 ) \">\n",
       "      <g>\n",
       "        <g transform=\"translate(17.961210910936405 0.0 ) \">\n",
       "          <g>\n",
       "            <line x1=\"68.07079488828138\" y1=\"0.0\" x2=\"68.07079488828138\" y2=\"338.4\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"172.7950947164066\" y1=\"0.0\" x2=\"172.7950947164066\" y2=\"338.4\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"277.5193945445318\" y1=\"0.0\" x2=\"277.5193945445318\" y2=\"338.4\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"382.243694372657\" y1=\"0.0\" x2=\"382.243694372657\" y2=\"338.4\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"486.9679942007822\" y1=\"0.0\" x2=\"486.9679942007822\" y2=\"338.4\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "          </g>\n",
       "        </g>\n",
       "        <g transform=\"translate(17.961210910936405 0.0 ) \">\n",
       "          <g>\n",
       "            <line x1=\"0.0\" y1=\"323.0181818181818\" x2=\"555.0387890890636\" y2=\"323.0181818181818\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"253.100826446281\" x2=\"555.0387890890636\" y2=\"253.100826446281\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"183.18347107438018\" x2=\"555.0387890890636\" y2=\"183.18347107438018\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"113.26611570247937\" x2=\"555.0387890890636\" y2=\"113.26611570247937\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"43.34876033057856\" x2=\"555.0387890890636\" y2=\"43.34876033057856\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "      <g clip-path=\"url(#cts7jk0)\" clip-bounds-jfx=\"[rect (17.961210910936405, 0.0), (555.0387890890636, 338.4)]\">\n",
       "        <g transform=\"translate(17.961210910936405 0.0 ) \">\n",
       "          <g>\n",
       "            <g>\n",
       "              <rect x=\"20.944859965625042\" y=\"43.34876033057856\" height=\"279.66942148760324\" width=\"94.25186984531268\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"125.66915979375025\" y=\"43.34876033057856\" height=\"209.75206611570243\" width=\"94.25186984531271\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"230.39345962187542\" y=\"43.34876033057856\" height=\"209.75206611570243\" width=\"94.25186984531274\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"335.1177594500006\" y=\"295.0512396694215\" height=\"27.966942148760324\" width=\"94.25186984531268\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"439.8420592781258\" y=\"15.381818181818232\" height=\"27.966942148760324\" width=\"94.25186984531274\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <line x1=\"125.66915979375025\" y1=\"239.11735537190083\" x2=\"219.9210296390629\" y2=\"239.11735537190083\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <line x1=\"230.39345962187542\" y1=\"57.33223140495875\" x2=\"324.64532946718816\" y2=\"57.33223140495875\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <line x1=\"335.1177594500006\" y1=\"309.0347107438016\" x2=\"429.36962929531336\" y2=\"309.0347107438016\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <line x1=\"439.8420592781258\" y1=\"29.365289256198366\" x2=\"534.0939291234386\" y2=\"29.365289256198366\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <g transform=\"rotate(0.0 68.07079488828138 173.18347107438018 ) \">\n",
       "                <path d=\"M77.34864943515554 193.18347107438018 C77.34864943515554 193.18347107438018 80.34864943515554 193.18347107438018 80.34864943515554 190.18347107438018 L80.34864943515554 176.18347107438018 C80.34864943515554 176.18347107438018 80.34864943515554 173.18347107438018 77.34864943515554 173.18347107438018 L58.792940341407224 173.18347107438018 C58.792940341407224 173.18347107438018 55.792940341407224 173.18347107438018 55.792940341407224 176.18347107438018 L55.792940341407224 190.18347107438018 C55.792940341407224 190.18347107438018 55.792940341407224 193.18347107438018 58.792940341407224 193.18347107438018 Z\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.0\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(68.07079488828138 189.18347107438018 ) \">\n",
       "                  <text style=\"fill:#000000;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>20</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 172.7950947164066 130.2018078512397 ) \">\n",
       "                <path d=\"M182.07294926328075 150.2018078512397 C182.07294926328075 150.2018078512397 185.07294926328075 150.2018078512397 185.07294926328075 147.2018078512397 L185.07294926328075 133.2018078512397 C185.07294926328075 133.2018078512397 185.07294926328075 130.2018078512397 182.07294926328075 130.2018078512397 L163.51724016953244 130.2018078512397 C163.51724016953244 130.2018078512397 160.51724016953244 130.2018078512397 160.51724016953244 133.2018078512397 L160.51724016953244 147.2018078512397 C160.51724016953244 147.2018078512397 160.51724016953244 150.2018078512397 163.51724016953244 150.2018078512397 Z\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.0\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(172.7950947164066 146.2018078512397 ) \">\n",
       "                  <text style=\"fill:#000000;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>15</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 382.24369437265693 265.0512396694215 ) \">\n",
       "                <path d=\"M385.382621646094 285.0512396694215 C385.382621646094 285.0512396694215 388.382621646094 285.0512396694215 388.382621646094 282.0512396694215 L388.382621646094 268.0512396694215 C388.382621646094 268.0512396694215 388.382621646094 265.0512396694215 385.382621646094 265.0512396694215 L379.1047670992198 265.0512396694215 C379.1047670992198 265.0512396694215 376.1047670992198 265.0512396694215 376.1047670992198 268.0512396694215 L376.1047670992198 282.0512396694215 C376.1047670992198 282.0512396694215 376.1047670992198 285.0512396694215 379.1047670992198 285.0512396694215 Z\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.75\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(382.24369437265693 281.0512396694215 ) \">\n",
       "                  <text style=\"fill:#474747;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>2</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 486.9679942007822 53.34876033057856 ) \">\n",
       "                <path d=\"M490.10692147421923 73.34876033057856 C490.10692147421923 73.34876033057856 493.10692147421923 73.34876033057856 493.10692147421923 70.34876033057856 L493.10692147421923 56.34876033057856 C493.10692147421923 56.34876033057856 493.10692147421923 53.34876033057856 490.10692147421923 53.34876033057856 L483.8290669273451 53.34876033057856 C483.8290669273451 53.34876033057856 480.8290669273451 53.34876033057856 480.8290669273451 56.34876033057856 L480.8290669273451 70.34876033057856 C480.8290669273451 70.34876033057856 480.8290669273451 73.34876033057856 483.8290669273451 73.34876033057856 Z\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.75\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(486.9679942007822 69.34876033057856 ) \">\n",
       "                  <text style=\"fill:#474747;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>2</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 277.5193945445318 146.24777892561985 ) \">\n",
       "                <path d=\"M286.79724909140594 166.24777892561985 C286.79724909140594 166.24777892561985 289.79724909140594 166.24777892561985 289.79724909140594 163.24777892561985 L289.79724909140594 149.24777892561985 C289.79724909140594 149.24777892561985 289.79724909140594 146.24777892561985 286.79724909140594 146.24777892561985 L268.24153999765764 146.24777892561985 C268.24153999765764 146.24777892561985 265.24153999765764 146.24777892561985 265.24153999765764 149.24777892561985 L265.24153999765764 163.24777892561985 C265.24153999765764 163.24777892561985 265.24153999765764 166.24777892561985 268.24153999765764 166.24777892561985 Z\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.0\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(277.5193945445318 162.24777892561985 ) \">\n",
       "                  <text style=\"fill:#000000;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>15</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "        <defs>\n",
       "          <clipPath id=\"cts7jk0\">\n",
       "            <rect x=\"17.961210910936405\" y=\"0.0\" width=\"555.0387890890636\" height=\"338.4\">\n",
       "            </rect>\n",
       "          </clipPath>\n",
       "        </defs>\n",
       "      </g>\n",
       "      <g>\n",
       "        <g transform=\"translate(17.961210910936405 338.4 ) \">\n",
       "          <g transform=\"translate(68.07079488828138 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 6.0 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>Without midline</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(172.7950947164066 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 21.6 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>Above midline</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(277.5193945445318 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 6.0 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>Below midline</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(382.243694372657 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 21.6 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>Above bar</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(486.9679942007822 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 6.0 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>Below bar</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <line x1=\"0.0\" y1=\"0.0\" x2=\"555.0387890890636\" y2=\"0.0\" stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\">\n",
       "          </line>\n",
       "        </g>\n",
       "        <g transform=\"translate(17.961210910936405 0.0 ) \">\n",
       "          <g transform=\"translate(0.0 323.0181818181818 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>0</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 253.100826446281 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>5</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 183.18347107438018 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>10</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 113.26611570247937 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>15</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 43.34876033057856 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>20</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "    </g>\n",
       "    <g transform=\"translate(15.0 175.2 ) rotate(-90.0 ) \">\n",
       "      <text class=\"axis-title-y\" y=\"0.0\" text-anchor=\"middle\">\n",
       "        <tspan>y</tspan>\n",
       "      </text>\n",
       "    </g>\n",
       "    <g transform=\"translate(316.4806054554682 394.0 ) \">\n",
       "      <text class=\"axis-title-x\" y=\"0.0\" text-anchor=\"middle\">\n",
       "        <tspan>vertical_category</tspan>\n",
       "      </text>\n",
       "    </g>\n",
       "    <path fill=\"rgb(0,0,0)\" fill-opacity=\"0.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" d=\"M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z\" pointer-events=\"none\">\n",
       "    </path>\n",
       "  </g>\n",
       "  <g id=\"dos0Eee\">\n",
       "  </g>\n",
       "</svg>\n",
       "                <script>document.getElementById(\"8ff59b2c-90be-43c6-80e5-b6c0e945daac\").style.display = \"none\";</script>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "letsPlot(data) {\n",
    "    x = \"vertical_category\"\n",
    "    y = \"y\"\n",
    "    ymin = \"ymin\"\n",
    "    ymax = \"ymax\"\n",
    "} + geomCrossbar(labels = layerLabels(\"value\").size(20))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "346a83be-e7d6-4ae7-8bd3-ac2c7048672d",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/plot+json": {
       "apply_color_scheme": true,
       "output": {
        "coord": {
         "flip": true,
         "name": "flip"
        },
        "data": {
         "horizontal_category": [
          "Without midline",
          "Right of midline",
          "Left of midline",
          "Right of bar",
          "Left of bar"
         ],
         "value": [
          20,
          15,
          15,
          2,
          2
         ],
         "vertical_category": [
          "Without midline",
          "Above midline",
          "Below midline",
          "Above bar",
          "Below bar"
         ],
         "y": [
          null,
          6,
          19,
          1,
          21
         ],
         "ymax": [
          20,
          20,
          20,
          2,
          22
         ],
         "ymin": [
          0,
          5,
          5,
          0,
          20
         ]
        },
        "data_meta": {
         "series_annotations": [
          {
           "column": "vertical_category",
           "type": "str"
          },
          {
           "column": "horizontal_category",
           "type": "str"
          },
          {
           "column": "ymin",
           "type": "int"
          },
          {
           "column": "ymax",
           "type": "int"
          },
          {
           "column": "y",
           "type": "int"
          },
          {
           "column": "value",
           "type": "int"
          }
         ]
        },
        "kind": "plot",
        "layers": [
         {
          "geom": "crossbar",
          "labels": {
           "annotation_size": 20,
           "variables": [
            "value"
           ]
          },
          "mapping": {},
          "position": "dodge",
          "stat": "identity"
         }
        ],
        "mapping": {
         "x": "horizontal_category",
         "y": "y",
         "ymax": "ymax",
         "ymin": "ymin"
        },
        "scales": []
       },
       "output_type": "lets_plot_spec",
       "swing_enabled": true
      },
      "text/html": [
       "   <div id=\"vaolE2\"></div>\n",
       "   <script type=\"text/javascript\" data-lets-plot-script=\"plot\">\n",
       "   \n",
       "   (function() {\n",
       "   // ----------\n",
       "   \n",
       "   const forceImmediateRender = false;\n",
       "   const responsive = false;\n",
       "   \n",
       "   let sizing = {\n",
       "       width_mode: \"MIN\",\n",
       "       height_mode: \"SCALED\",\n",
       "       width: null, \n",
       "       height: null \n",
       "   };\n",
       "   \n",
       "   const preferredWidth = document.body.dataset.letsPlotPreferredWidth;\n",
       "   if (preferredWidth !== undefined) {\n",
       "       sizing = {\n",
       "           width_mode: 'FIXED',\n",
       "           height_mode: 'SCALED',\n",
       "           width: parseFloat(preferredWidth)\n",
       "       };\n",
       "   }\n",
       "   \n",
       "   const containerDiv = document.getElementById(\"vaolE2\");\n",
       "   let fig = null;\n",
       "   \n",
       "   function renderPlot() {\n",
       "       if (fig === null) {\n",
       "           const plotSpec = {\n",
       "\"mapping\":{\n",
       "\"x\":\"horizontal_category\",\n",
       "\"y\":\"y\",\n",
       "\"ymin\":\"ymin\",\n",
       "\"ymax\":\"ymax\"\n",
       "},\n",
       "\"coord\":{\n",
       "\"name\":\"flip\",\n",
       "\"flip\":true\n",
       "},\n",
       "\"data\":{\n",
       "\"ymin\":[0.0,5.0,5.0,0.0,20.0],\n",
       "\"ymax\":[20.0,20.0,20.0,2.0,22.0],\n",
       "\"y\":[null,6.0,19.0,1.0,21.0],\n",
       "\"horizontal_category\":[\"Without midline\",\"Right of midline\",\"Left of midline\",\"Right of bar\",\"Left of bar\"],\n",
       "\"value\":[20.0,15.0,15.0,2.0,2.0]\n",
       "},\n",
       "\"kind\":\"plot\",\n",
       "\"scales\":[],\n",
       "\"layers\":[{\n",
       "\"mapping\":{\n",
       "},\n",
       "\"stat\":\"identity\",\n",
       "\"position\":\"dodge\",\n",
       "\"geom\":\"crossbar\",\n",
       "\"labels\":{\n",
       "\"variables\":[\"value\"],\n",
       "\"annotation_size\":20\n",
       "},\n",
       "\"data\":{\n",
       "}\n",
       "}],\n",
       "\"data_meta\":{\n",
       "\"series_annotations\":[{\n",
       "\"type\":\"str\",\n",
       "\"column\":\"vertical_category\"\n",
       "},{\n",
       "\"type\":\"str\",\n",
       "\"column\":\"horizontal_category\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"ymin\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"ymax\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"y\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"value\"\n",
       "}]\n",
       "},\n",
       "\"spec_id\":\"3\"\n",
       "};\n",
       "           window.letsPlotCall(function() { fig = LetsPlot.buildPlotFromProcessedSpecs(plotSpec, containerDiv, sizing); });\n",
       "       } else {\n",
       "           fig.updateView({});\n",
       "       }\n",
       "   }\n",
       "   \n",
       "   const renderImmediately = \n",
       "       forceImmediateRender || (\n",
       "           sizing.width_mode === 'FIXED' && \n",
       "           (sizing.height_mode === 'FIXED' || sizing.height_mode === 'SCALED')\n",
       "       );\n",
       "   \n",
       "   if (renderImmediately) {\n",
       "       renderPlot();\n",
       "   }\n",
       "   \n",
       "   if (!renderImmediately || responsive) {\n",
       "       // Set up observer for initial sizing or continuous monitoring\n",
       "       var observer = new ResizeObserver(function(entries) {\n",
       "           for (let entry of entries) {\n",
       "               if (entry.contentBoxSize && \n",
       "                   entry.contentBoxSize[0].inlineSize > 0) {\n",
       "                   if (!responsive && observer) {\n",
       "                       observer.disconnect();\n",
       "                       observer = null;\n",
       "                   }\n",
       "                   renderPlot();\n",
       "                   if (!responsive) {\n",
       "                       break;\n",
       "                   }\n",
       "               }\n",
       "           }\n",
       "       });\n",
       "       \n",
       "       observer.observe(containerDiv);\n",
       "   }\n",
       "   \n",
       "   // ----------\n",
       "   })();\n",
       "   \n",
       "   </script>                <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" display=\"block\" class=\"plt-container\" id=d17a6d60-64c5-46c6-9868-65cc425ed236 width=\"100%\" height=\"100%\" style=\"max-width: 600.0px; max-height: 400.0px;\" viewBox=\"0 0 600.0 400.0\" preserveAspectRatio=\"xMinYMin meet\">\n",
       "  <style type=\"text/css\">\n",
       "  .plt-container {\n",
       "   font-family: sans-serif;\n",
       "   user-select: none;\n",
       "   -webkit-user-select: none;\n",
       "   -moz-user-select: none;\n",
       "   -ms-user-select: none;\n",
       "}\n",
       "text {\n",
       "   text-rendering: optimizeLegibility;\n",
       "}\n",
       "#py24KyX .plot-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 16.0px;\n",
       "\n",
       "}\n",
       "#py24KyX .plot-subtitle {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#py24KyX .plot-caption {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#py24KyX .hyperlink-element {\n",
       "fill: #118ed8;\n",
       "font-weight: normal;\n",
       "   font-style: normal;\n",
       "}\n",
       "#py24KyX .legend-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#py24KyX .legend-item {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#py24KyX .axis-title-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#py24KyX .axis-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dD4DoVv .axis-tooltip-text-y {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#py24KyX .axis-title-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#py24KyX .axis-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dD4DoVv .axis-tooltip-text-x {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#py24KyX .facet-strip-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#py24KyX .facet-strip-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dD4DoVv .tooltip-text {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dD4DoVv .tooltip-title {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dD4DoVv .tooltip-label {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "\n",
       "  </style>\n",
       "  <g id=\"py24KyX\">\n",
       "    <path fill-rule=\"evenodd\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" d=\"M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z\">\n",
       "    </path>\n",
       "    <g transform=\"translate(21.0 6.0 ) \">\n",
       "      <g>\n",
       "        <g transform=\"translate(115.68459652784607 0.0 ) \">\n",
       "          <g>\n",
       "            <line x1=\"20.787063794188818\" y1=\"0.0\" x2=\"20.787063794188818\" y2=\"358.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"115.27371740413798\" y1=\"0.0\" x2=\"115.27371740413798\" y2=\"358.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"209.76037101408713\" y1=\"0.0\" x2=\"209.76037101408713\" y2=\"358.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"304.2470246240363\" y1=\"0.0\" x2=\"304.2470246240363\" y2=\"358.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"398.7336782339855\" y1=\"0.0\" x2=\"398.7336782339855\" y2=\"358.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "          </g>\n",
       "        </g>\n",
       "        <g transform=\"translate(115.68459652784607 0.0 ) \">\n",
       "          <g>\n",
       "            <line x1=\"0.0\" y1=\"314.09433962264154\" x2=\"457.31540347215395\" y2=\"314.09433962264154\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"246.5471698113208\" x2=\"457.31540347215395\" y2=\"246.5471698113208\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"179.00000000000006\" x2=\"457.31540347215395\" y2=\"179.00000000000006\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"111.45283018867931\" x2=\"457.31540347215395\" y2=\"111.45283018867931\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"43.90566037735857\" x2=\"457.31540347215395\" y2=\"43.90566037735857\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "      <g clip-path=\"url(#c7scEo1)\" clip-bounds-jfx=\"[rect (115.68459652784607, 0.0), (457.31540347215395, 358.0)]\">\n",
       "        <g transform=\"translate(115.68459652784607 0.0 ) \">\n",
       "          <g>\n",
       "            <g>\n",
       "              <rect x=\"20.787063794188818\" y=\"283.6981132075472\" height=\"60.79245283018872\" width=\"377.94661443979663\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"115.27371740413798\" y=\"216.15094339622647\" height=\"60.792452830188665\" width=\"283.4599608298475\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"115.27371740413798\" y=\"148.60377358490572\" height=\"60.792452830188665\" width=\"283.4599608298475\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"20.787063794188818\" y=\"81.05660377358501\" height=\"60.79245283018864\" width=\"37.79466144397966\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"398.7336782339855\" y=\"13.509433962264211\" height=\"60.792452830188694\" width=\"37.79466144397969\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <line x1=\"134.1710481261278\" y1=\"276.94339622641513\" x2=\"134.1710481261278\" y2=\"216.15094339622647\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <line x1=\"379.83634751199565\" y1=\"209.3962264150944\" x2=\"379.83634751199565\" y2=\"148.60377358490572\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <line x1=\"39.68439451617865\" y1=\"141.84905660377365\" x2=\"39.68439451617865\" y2=\"81.05660377358498\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <line x1=\"417.6310089559753\" y1=\"74.3018867924529\" x2=\"417.6310089559753\" y2=\"13.509433962264211\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <g transform=\"rotate(0.0 246.52378245806682 169.00000000000006 ) \">\n",
       "                <path d=\"M255.80163700494097 189.00000000000006 C255.80163700494097 189.00000000000006 258.80163700494097 189.00000000000006 258.80163700494097 186.00000000000006 L258.80163700494097 172.00000000000006 C258.80163700494097 172.00000000000006 258.80163700494097 169.00000000000006 255.80163700494097 169.00000000000006 L237.24592791119267 169.00000000000006 C237.24592791119267 169.00000000000006 234.24592791119267 169.00000000000006 234.24592791119267 172.00000000000006 L234.24592791119267 186.00000000000006 C234.24592791119267 186.00000000000006 234.24592791119267 189.00000000000006 237.24592791119267 189.00000000000006 Z\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.0\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(246.52378245806682 185.00000000000006 ) \">\n",
       "                  <text style=\"fill:#000000;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>15</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 267.48361318005664 236.5471698113208 ) \">\n",
       "                <path d=\"M276.7614677269308 256.5471698113208 C276.7614677269308 256.5471698113208 279.7614677269308 256.5471698113208 279.7614677269308 253.54716981132083 L279.7614677269308 239.5471698113208 C279.7614677269308 239.5471698113208 279.7614677269308 236.5471698113208 276.7614677269308 236.5471698113208 L258.2057586331825 236.5471698113208 C258.2057586331825 236.5471698113208 255.20575863318248 236.5471698113208 255.20575863318248 239.5471698113208 L255.20575863318248 253.54716981132083 C255.20575863318248 253.54716981132083 255.20575863318248 256.5471698113208 258.2057586331825 256.5471698113208 Z\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.0\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(267.48361318005664 252.5471698113208 ) \">\n",
       "                  <text style=\"fill:#000000;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>15</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 382.59475096054837 33.90566037735856 ) \">\n",
       "                <path d=\"M385.7336782339854 53.90566037735856 C385.7336782339854 53.90566037735856 388.7336782339854 53.90566037735856 388.7336782339854 50.90566037735856 L388.7336782339854 36.90566037735856 C388.7336782339854 36.90566037735856 388.7336782339854 33.90566037735856 385.7336782339854 33.90566037735856 L379.45582368711126 33.90566037735856 C379.45582368711126 33.90566037735856 376.45582368711126 33.90566037735856 376.45582368711126 36.90566037735856 L376.45582368711126 50.90566037735856 C376.45582368711126 50.90566037735856 376.45582368711126 53.90566037735856 379.45582368711126 53.90566037735856 Z\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.75\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(382.59475096054837 49.90566037735856 ) \">\n",
       "                  <text style=\"fill:#474747;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>2</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 74.72065251160556 101.45283018867933 ) \">\n",
       "                <path d=\"M77.85957978504264 121.45283018867933 C77.85957978504264 121.45283018867933 80.85957978504264 121.45283018867933 80.85957978504264 118.45283018867933 L80.85957978504264 104.45283018867933 C80.85957978504264 104.45283018867933 80.85957978504264 101.45283018867933 77.85957978504264 101.45283018867933 L71.58172523816849 101.45283018867933 C71.58172523816849 101.45283018867933 68.58172523816849 101.45283018867933 68.58172523816849 104.45283018867933 L68.58172523816849 118.45283018867933 C68.58172523816849 118.45283018867933 68.58172523816849 121.45283018867933 71.58172523816849 121.45283018867933 Z\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.75\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(74.72065251160556 117.45283018867933 ) \">\n",
       "                  <text style=\"fill:#474747;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>2</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 209.76037101408713 304.09433962264154 ) \">\n",
       "                <path d=\"M219.03822556096128 324.09433962264154 C219.03822556096128 324.09433962264154 222.03822556096128 324.09433962264154 222.03822556096128 321.09433962264154 L222.03822556096128 307.09433962264154 C222.03822556096128 307.09433962264154 222.03822556096128 304.09433962264154 219.03822556096128 304.09433962264154 L200.48251646721297 304.09433962264154 C200.48251646721297 304.09433962264154 197.48251646721297 304.09433962264154 197.48251646721297 307.09433962264154 L197.48251646721297 321.09433962264154 C197.48251646721297 321.09433962264154 197.48251646721297 324.09433962264154 200.48251646721297 324.09433962264154 Z\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.0\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(209.76037101408713 320.09433962264154 ) \">\n",
       "                  <text style=\"fill:#000000;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>20</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "        <defs>\n",
       "          <clipPath id=\"c7scEo1\">\n",
       "            <rect x=\"115.68459652784607\" y=\"0.0\" width=\"457.31540347215395\" height=\"358.0\">\n",
       "            </rect>\n",
       "          </clipPath>\n",
       "        </defs>\n",
       "      </g>\n",
       "      <g>\n",
       "        <g transform=\"translate(115.68459652784607 358.0 ) \">\n",
       "          <g transform=\"translate(20.787063794188818 0.0 ) \">\n",
       "            <g transform=\"translate(0.0 2.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>0</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(115.27371740413798 0.0 ) \">\n",
       "            <g transform=\"translate(0.0 2.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>5</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(209.76037101408713 0.0 ) \">\n",
       "            <g transform=\"translate(0.0 2.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>10</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(304.2470246240363 0.0 ) \">\n",
       "            <g transform=\"translate(0.0 2.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>15</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(398.7336782339855 0.0 ) \">\n",
       "            <g transform=\"translate(0.0 2.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>20</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "        <g transform=\"translate(115.68459652784607 0.0 ) \">\n",
       "          <g transform=\"translate(0.0 314.09433962264154 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"-4.0\" y2=\"0.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(-6.0 0.0 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>Without midline</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 246.5471698113208 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"-4.0\" y2=\"0.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(-6.0 0.0 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>Right of midline</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 179.00000000000006 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"-4.0\" y2=\"0.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(-6.0 0.0 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>Left of midline</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 111.45283018867931 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"-4.0\" y2=\"0.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(-6.0 0.0 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>Right of bar</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 43.90566037735857 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"-4.0\" y2=\"0.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(-6.0 0.0 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>Left of bar</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <line x1=\"0.0\" y1=\"0.0\" x2=\"0.0\" y2=\"358.0\" stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\">\n",
       "          </line>\n",
       "        </g>\n",
       "      </g>\n",
       "    </g>\n",
       "    <g transform=\"translate(15.0 185.0 ) rotate(-90.0 ) \">\n",
       "      <text class=\"axis-title-x\" y=\"0.0\" text-anchor=\"middle\">\n",
       "        <tspan>horizontal_category</tspan>\n",
       "      </text>\n",
       "    </g>\n",
       "    <g transform=\"translate(365.342298263923 394.0 ) \">\n",
       "      <text class=\"axis-title-y\" y=\"0.0\" text-anchor=\"middle\">\n",
       "        <tspan>y</tspan>\n",
       "      </text>\n",
       "    </g>\n",
       "    <path fill=\"rgb(0,0,0)\" fill-opacity=\"0.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" d=\"M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z\" pointer-events=\"none\">\n",
       "    </path>\n",
       "  </g>\n",
       "  <g id=\"dD4DoVv\">\n",
       "  </g>\n",
       "</svg>\n",
       "                <script>document.getElementById(\"d17a6d60-64c5-46c6-9868-65cc425ed236\").style.display = \"none\";</script>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "letsPlot(data) {\n",
    "    x = \"horizontal_category\"\n",
    "    y = \"y\"\n",
    "    ymin = \"ymin\"\n",
    "    ymax = \"ymax\"\n",
    "} + geomCrossbar(labels = layerLabels(\"value\").size(20)) +\n",
    "    coordFlip()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1de52948-f9d2-49be-8c22-b264c52038fd",
   "metadata": {},
   "source": [
    "### Long Labels Handling\n",
    "Lond text strings that don't fit in the bar are drawn with a background."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "653e288d-9481-4ba2-a617-aa0519d25d31",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/plot+json": {
       "apply_color_scheme": true,
       "output": {
        "data": {
         "horizontal_category": [
          "Without midline",
          "Right of midline",
          "Left of midline",
          "Right of bar",
          "Left of bar"
         ],
         "value": [
          20,
          15,
          15,
          2,
          2
         ],
         "vertical_category": [
          "Without midline",
          "Above midline",
          "Below midline",
          "Above bar",
          "Below bar"
         ],
         "y": [
          null,
          6,
          19,
          1,
          21
         ],
         "ymax": [
          20,
          20,
          20,
          2,
          22
         ],
         "ymin": [
          0,
          5,
          5,
          0,
          20
         ]
        },
        "data_meta": {
         "series_annotations": [
          {
           "column": "vertical_category",
           "type": "str"
          },
          {
           "column": "horizontal_category",
           "type": "str"
          },
          {
           "column": "ymin",
           "type": "int"
          },
          {
           "column": "ymax",
           "type": "int"
          },
          {
           "column": "y",
           "type": "int"
          },
          {
           "column": "value",
           "type": "int"
          }
         ]
        },
        "kind": "plot",
        "layers": [
         {
          "fill": "lightblue",
          "geom": "crossbar",
          "labels": {
           "annotation_size": 20,
           "variables": [
            "vertical_category"
           ]
          },
          "mapping": {},
          "position": "dodge",
          "stat": "identity"
         }
        ],
        "mapping": {
         "x": "vertical_category",
         "y": "y",
         "ymax": "ymax",
         "ymin": "ymin"
        },
        "scales": []
       },
       "output_type": "lets_plot_spec",
       "swing_enabled": true
      },
      "text/html": [
       "   <div id=\"tqSKoY\"></div>\n",
       "   <script type=\"text/javascript\" data-lets-plot-script=\"plot\">\n",
       "   \n",
       "   (function() {\n",
       "   // ----------\n",
       "   \n",
       "   const forceImmediateRender = false;\n",
       "   const responsive = false;\n",
       "   \n",
       "   let sizing = {\n",
       "       width_mode: \"MIN\",\n",
       "       height_mode: \"SCALED\",\n",
       "       width: null, \n",
       "       height: null \n",
       "   };\n",
       "   \n",
       "   const preferredWidth = document.body.dataset.letsPlotPreferredWidth;\n",
       "   if (preferredWidth !== undefined) {\n",
       "       sizing = {\n",
       "           width_mode: 'FIXED',\n",
       "           height_mode: 'SCALED',\n",
       "           width: parseFloat(preferredWidth)\n",
       "       };\n",
       "   }\n",
       "   \n",
       "   const containerDiv = document.getElementById(\"tqSKoY\");\n",
       "   let fig = null;\n",
       "   \n",
       "   function renderPlot() {\n",
       "       if (fig === null) {\n",
       "           const plotSpec = {\n",
       "\"mapping\":{\n",
       "\"x\":\"vertical_category\",\n",
       "\"y\":\"y\",\n",
       "\"ymin\":\"ymin\",\n",
       "\"ymax\":\"ymax\"\n",
       "},\n",
       "\"data\":{\n",
       "\"ymin\":[0.0,5.0,5.0,0.0,20.0],\n",
       "\"ymax\":[20.0,20.0,20.0,2.0,22.0],\n",
       "\"y\":[null,6.0,19.0,1.0,21.0],\n",
       "\"vertical_category\":[\"Without midline\",\"Above midline\",\"Below midline\",\"Above bar\",\"Below bar\"]\n",
       "},\n",
       "\"kind\":\"plot\",\n",
       "\"scales\":[],\n",
       "\"layers\":[{\n",
       "\"mapping\":{\n",
       "},\n",
       "\"stat\":\"identity\",\n",
       "\"position\":\"dodge\",\n",
       "\"geom\":\"crossbar\",\n",
       "\"fill\":\"lightblue\",\n",
       "\"labels\":{\n",
       "\"variables\":[\"vertical_category\"],\n",
       "\"annotation_size\":20\n",
       "},\n",
       "\"data\":{\n",
       "}\n",
       "}],\n",
       "\"data_meta\":{\n",
       "\"series_annotations\":[{\n",
       "\"type\":\"str\",\n",
       "\"column\":\"vertical_category\"\n",
       "},{\n",
       "\"type\":\"str\",\n",
       "\"column\":\"horizontal_category\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"ymin\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"ymax\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"y\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"value\"\n",
       "}]\n",
       "},\n",
       "\"spec_id\":\"5\"\n",
       "};\n",
       "           window.letsPlotCall(function() { fig = LetsPlot.buildPlotFromProcessedSpecs(plotSpec, containerDiv, sizing); });\n",
       "       } else {\n",
       "           fig.updateView({});\n",
       "       }\n",
       "   }\n",
       "   \n",
       "   const renderImmediately = \n",
       "       forceImmediateRender || (\n",
       "           sizing.width_mode === 'FIXED' && \n",
       "           (sizing.height_mode === 'FIXED' || sizing.height_mode === 'SCALED')\n",
       "       );\n",
       "   \n",
       "   if (renderImmediately) {\n",
       "       renderPlot();\n",
       "   }\n",
       "   \n",
       "   if (!renderImmediately || responsive) {\n",
       "       // Set up observer for initial sizing or continuous monitoring\n",
       "       var observer = new ResizeObserver(function(entries) {\n",
       "           for (let entry of entries) {\n",
       "               if (entry.contentBoxSize && \n",
       "                   entry.contentBoxSize[0].inlineSize > 0) {\n",
       "                   if (!responsive && observer) {\n",
       "                       observer.disconnect();\n",
       "                       observer = null;\n",
       "                   }\n",
       "                   renderPlot();\n",
       "                   if (!responsive) {\n",
       "                       break;\n",
       "                   }\n",
       "               }\n",
       "           }\n",
       "       });\n",
       "       \n",
       "       observer.observe(containerDiv);\n",
       "   }\n",
       "   \n",
       "   // ----------\n",
       "   })();\n",
       "   \n",
       "   </script>                <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" display=\"block\" class=\"plt-container\" id=8d0cb55f-d365-4623-a9bf-3b8e9d8ee5aa width=\"100%\" height=\"100%\" style=\"max-width: 600.0px; max-height: 400.0px;\" viewBox=\"0 0 600.0 400.0\" preserveAspectRatio=\"xMinYMin meet\">\n",
       "  <style type=\"text/css\">\n",
       "  .plt-container {\n",
       "   font-family: sans-serif;\n",
       "   user-select: none;\n",
       "   -webkit-user-select: none;\n",
       "   -moz-user-select: none;\n",
       "   -ms-user-select: none;\n",
       "}\n",
       "text {\n",
       "   text-rendering: optimizeLegibility;\n",
       "}\n",
       "#plOiYzo .plot-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 16.0px;\n",
       "\n",
       "}\n",
       "#plOiYzo .plot-subtitle {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#plOiYzo .plot-caption {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#plOiYzo .hyperlink-element {\n",
       "fill: #118ed8;\n",
       "font-weight: normal;\n",
       "   font-style: normal;\n",
       "}\n",
       "#plOiYzo .legend-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#plOiYzo .legend-item {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#plOiYzo .axis-title-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#plOiYzo .axis-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#d9zdFHp .axis-tooltip-text-x {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#plOiYzo .axis-title-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#plOiYzo .axis-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#d9zdFHp .axis-tooltip-text-y {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#plOiYzo .facet-strip-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#plOiYzo .facet-strip-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#d9zdFHp .tooltip-text {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#d9zdFHp .tooltip-title {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#d9zdFHp .tooltip-label {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "\n",
       "  </style>\n",
       "  <g id=\"plOiYzo\">\n",
       "    <path fill-rule=\"evenodd\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" d=\"M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z\">\n",
       "    </path>\n",
       "    <g transform=\"translate(21.0 6.0 ) \">\n",
       "      <g>\n",
       "        <g transform=\"translate(17.961210910936405 0.0 ) \">\n",
       "          <g>\n",
       "            <line x1=\"68.07079488828138\" y1=\"0.0\" x2=\"68.07079488828138\" y2=\"338.4\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"172.7950947164066\" y1=\"0.0\" x2=\"172.7950947164066\" y2=\"338.4\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"277.5193945445318\" y1=\"0.0\" x2=\"277.5193945445318\" y2=\"338.4\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"382.243694372657\" y1=\"0.0\" x2=\"382.243694372657\" y2=\"338.4\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"486.9679942007822\" y1=\"0.0\" x2=\"486.9679942007822\" y2=\"338.4\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "          </g>\n",
       "        </g>\n",
       "        <g transform=\"translate(17.961210910936405 0.0 ) \">\n",
       "          <g>\n",
       "            <line x1=\"0.0\" y1=\"323.0181818181818\" x2=\"555.0387890890636\" y2=\"323.0181818181818\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"253.100826446281\" x2=\"555.0387890890636\" y2=\"253.100826446281\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"183.18347107438018\" x2=\"555.0387890890636\" y2=\"183.18347107438018\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"113.26611570247937\" x2=\"555.0387890890636\" y2=\"113.26611570247937\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"43.34876033057856\" x2=\"555.0387890890636\" y2=\"43.34876033057856\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "      <g clip-path=\"url(#cu4dIO7)\" clip-bounds-jfx=\"[rect (17.961210910936405, 0.0), (555.0387890890636, 338.4)]\">\n",
       "        <g transform=\"translate(17.961210910936405 0.0 ) \">\n",
       "          <g>\n",
       "            <g>\n",
       "              <rect x=\"20.944859965625042\" y=\"43.34876033057856\" height=\"279.66942148760324\" width=\"94.25186984531268\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(173,216,230)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"125.66915979375025\" y=\"43.34876033057856\" height=\"209.75206611570243\" width=\"94.25186984531271\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(173,216,230)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"230.39345962187542\" y=\"43.34876033057856\" height=\"209.75206611570243\" width=\"94.25186984531274\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(173,216,230)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"335.1177594500006\" y=\"295.0512396694215\" height=\"27.966942148760324\" width=\"94.25186984531268\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(173,216,230)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"439.8420592781258\" y=\"15.381818181818232\" height=\"27.966942148760324\" width=\"94.25186984531274\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(173,216,230)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <line x1=\"125.66915979375025\" y1=\"239.11735537190083\" x2=\"219.9210296390629\" y2=\"239.11735537190083\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <line x1=\"230.39345962187542\" y1=\"57.33223140495875\" x2=\"324.64532946718816\" y2=\"57.33223140495875\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <line x1=\"335.1177594500006\" y1=\"309.0347107438016\" x2=\"429.36962929531336\" y2=\"309.0347107438016\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <line x1=\"439.8420592781258\" y1=\"29.365289256198366\" x2=\"534.0939291234386\" y2=\"29.365289256198366\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <g transform=\"rotate(0.0 172.7950947164066 130.2018078512397 ) \">\n",
       "                <path d=\"M244.696049136356 150.2018078512397 C244.696049136356 150.2018078512397 247.696049136356 150.2018078512397 247.696049136356 147.2018078512397 L247.696049136356 133.2018078512397 C247.696049136356 133.2018078512397 247.696049136356 130.2018078512397 244.696049136356 130.2018078512397 L100.89414029645718 130.2018078512397 C100.89414029645718 130.2018078512397 97.89414029645718 130.2018078512397 97.89414029645718 133.2018078512397 L97.89414029645718 147.2018078512397 C97.89414029645718 147.2018078512397 97.89414029645718 150.2018078512397 100.89414029645718 150.2018078512397 Z\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.75\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(172.7950947164066 146.2018078512397 ) \">\n",
       "                  <text style=\"fill:#474747;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>Above midline</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 486.9679942007822 53.34876033057856 ) \">\n",
       "                <path d=\"M536.549481947078 73.34876033057856 C536.549481947078 73.34876033057856 539.549481947078 73.34876033057856 539.549481947078 70.34876033057856 L539.549481947078 56.34876033057856 C539.549481947078 56.34876033057856 539.549481947078 53.34876033057856 536.549481947078 53.34876033057856 L437.3865064544863 53.34876033057856 C437.3865064544863 53.34876033057856 434.3865064544863 53.34876033057856 434.3865064544863 56.34876033057856 L434.3865064544863 70.34876033057856 C434.3865064544863 70.34876033057856 434.3865064544863 73.34876033057856 437.3865064544863 73.34876033057856 Z\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.75\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(486.9679942007822 69.34876033057856 ) \">\n",
       "                  <text style=\"fill:#474747;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>Below bar</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 68.07079488828138 173.18347107438018 ) \">\n",
       "                <path d=\"M148.60811426994417 193.18347107438018 C148.60811426994417 193.18347107438018 151.60811426994417 193.18347107438018 151.60811426994417 190.18347107438018 L151.60811426994417 176.18347107438018 C151.60811426994417 176.18347107438018 151.60811426994417 173.18347107438018 148.60811426994417 173.18347107438018 L-12.4665244933814 173.18347107438018 C-12.4665244933814 173.18347107438018 -15.4665244933814 173.18347107438018 -15.4665244933814 176.18347107438018 L-15.4665244933814 190.18347107438018 C-15.4665244933814 190.18347107438018 -15.4665244933814 193.18347107438018 -12.4665244933814 193.18347107438018 Z\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.75\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(68.07079488828138 189.18347107438018 ) \">\n",
       "                  <text style=\"fill:#474747;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>Without midline</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 382.24369437265693 265.0512396694215 ) \">\n",
       "                <path d=\"M431.4576752915316 285.0512396694215 C431.4576752915316 285.0512396694215 434.4576752915316 285.0512396694215 434.4576752915316 282.0512396694215 L434.4576752915316 268.0512396694215 C434.4576752915316 268.0512396694215 434.4576752915316 265.0512396694215 431.4576752915316 265.0512396694215 L333.02971345378234 265.0512396694215 C333.02971345378234 265.0512396694215 330.02971345378234 265.0512396694215 330.02971345378234 268.0512396694215 L330.02971345378234 282.0512396694215 C330.02971345378234 282.0512396694215 330.02971345378234 285.0512396694215 333.02971345378234 285.0512396694215 Z\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.75\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(382.24369437265693 281.0512396694215 ) \">\n",
       "                  <text style=\"fill:#474747;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>Above bar</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 277.5193945445318 146.24777892561985 ) \">\n",
       "                <path d=\"M349.7878557919024 166.24777892561985 C349.7878557919024 166.24777892561985 352.7878557919024 166.24777892561985 352.7878557919024 163.24777892561985 L352.7878557919024 149.24777892561985 C352.7878557919024 149.24777892561985 352.7878557919024 146.24777892561985 349.7878557919024 146.24777892561985 L205.25093329716117 146.24777892561985 C205.25093329716117 146.24777892561985 202.25093329716117 146.24777892561985 202.25093329716117 149.24777892561985 L202.25093329716117 163.24777892561985 C202.25093329716117 163.24777892561985 202.25093329716117 166.24777892561985 205.25093329716117 166.24777892561985 Z\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.75\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(277.5193945445318 162.24777892561985 ) \">\n",
       "                  <text style=\"fill:#474747;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>Below midline</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "        <defs>\n",
       "          <clipPath id=\"cu4dIO7\">\n",
       "            <rect x=\"17.961210910936405\" y=\"0.0\" width=\"555.0387890890636\" height=\"338.4\">\n",
       "            </rect>\n",
       "          </clipPath>\n",
       "        </defs>\n",
       "      </g>\n",
       "      <g>\n",
       "        <g transform=\"translate(17.961210910936405 338.4 ) \">\n",
       "          <g transform=\"translate(68.07079488828138 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 6.0 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>Without midline</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(172.7950947164066 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 21.6 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>Above midline</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(277.5193945445318 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 6.0 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>Below midline</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(382.243694372657 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 21.6 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>Above bar</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(486.9679942007822 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 6.0 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>Below bar</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <line x1=\"0.0\" y1=\"0.0\" x2=\"555.0387890890636\" y2=\"0.0\" stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\">\n",
       "          </line>\n",
       "        </g>\n",
       "        <g transform=\"translate(17.961210910936405 0.0 ) \">\n",
       "          <g transform=\"translate(0.0 323.0181818181818 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>0</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 253.100826446281 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>5</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 183.18347107438018 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>10</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 113.26611570247937 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>15</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 43.34876033057856 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>20</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "    </g>\n",
       "    <g transform=\"translate(15.0 175.2 ) rotate(-90.0 ) \">\n",
       "      <text class=\"axis-title-y\" y=\"0.0\" text-anchor=\"middle\">\n",
       "        <tspan>y</tspan>\n",
       "      </text>\n",
       "    </g>\n",
       "    <g transform=\"translate(316.4806054554682 394.0 ) \">\n",
       "      <text class=\"axis-title-x\" y=\"0.0\" text-anchor=\"middle\">\n",
       "        <tspan>vertical_category</tspan>\n",
       "      </text>\n",
       "    </g>\n",
       "    <path fill=\"rgb(0,0,0)\" fill-opacity=\"0.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" d=\"M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z\" pointer-events=\"none\">\n",
       "    </path>\n",
       "  </g>\n",
       "  <g id=\"d9zdFHp\">\n",
       "  </g>\n",
       "</svg>\n",
       "                <script>document.getElementById(\"8d0cb55f-d365-4623-a9bf-3b8e9d8ee5aa\").style.display = \"none\";</script>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "letsPlot(data) {\n",
    "    x = \"vertical_category\"\n",
    "    y = \"y\"\n",
    "    ymin = \"ymin\"\n",
    "    ymax = \"ymax\"\n",
    "} + geomCrossbar(\n",
    "    fill = \"lightblue\",\n",
    "    labels = layerLabels(\"vertical_category\").size(20)\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e5f55b41-8d5f-497f-b88d-56bbf55b7523",
   "metadata": {},
   "source": [
    "### Inheriting the Geometry Colors"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "a978ca3f-8ce1-45cd-8e88-0119d678b99c",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/plot+json": {
       "apply_color_scheme": true,
       "output": {
        "data": {
         "horizontal_category": [
          "Without midline",
          "Right of midline",
          "Left of midline",
          "Right of bar",
          "Left of bar"
         ],
         "value": [
          20,
          15,
          15,
          2,
          2
         ],
         "vertical_category": [
          "Without midline",
          "Above midline",
          "Below midline",
          "Above bar",
          "Below bar"
         ],
         "y": [
          null,
          6,
          19,
          1,
          21
         ],
         "ymax": [
          20,
          20,
          20,
          2,
          22
         ],
         "ymin": [
          0,
          5,
          5,
          0,
          20
         ]
        },
        "data_meta": {
         "series_annotations": [
          {
           "column": "vertical_category",
           "type": "str"
          },
          {
           "column": "horizontal_category",
           "type": "str"
          },
          {
           "column": "ymin",
           "type": "int"
          },
          {
           "column": "ymax",
           "type": "int"
          },
          {
           "column": "y",
           "type": "int"
          },
          {
           "column": "value",
           "type": "int"
          }
         ]
        },
        "kind": "plot",
        "layers": [
         {
          "geom": "crossbar",
          "labels": {
           "annotation_size": 20,
           "use_layer_color": true,
           "variables": [
            "value"
           ]
          },
          "mapping": {},
          "position": "dodge",
          "show_legend": false,
          "stat": "identity"
         }
        ],
        "mapping": {
         "color": "vertical_category",
         "x": "vertical_category",
         "y": "y",
         "ymax": "ymax",
         "ymin": "ymin"
        },
        "scales": []
       },
       "output_type": "lets_plot_spec",
       "swing_enabled": true
      },
      "text/html": [
       "   <div id=\"5mqJoB\"></div>\n",
       "   <script type=\"text/javascript\" data-lets-plot-script=\"plot\">\n",
       "   \n",
       "   (function() {\n",
       "   // ----------\n",
       "   \n",
       "   const forceImmediateRender = false;\n",
       "   const responsive = false;\n",
       "   \n",
       "   let sizing = {\n",
       "       width_mode: \"MIN\",\n",
       "       height_mode: \"SCALED\",\n",
       "       width: null, \n",
       "       height: null \n",
       "   };\n",
       "   \n",
       "   const preferredWidth = document.body.dataset.letsPlotPreferredWidth;\n",
       "   if (preferredWidth !== undefined) {\n",
       "       sizing = {\n",
       "           width_mode: 'FIXED',\n",
       "           height_mode: 'SCALED',\n",
       "           width: parseFloat(preferredWidth)\n",
       "       };\n",
       "   }\n",
       "   \n",
       "   const containerDiv = document.getElementById(\"5mqJoB\");\n",
       "   let fig = null;\n",
       "   \n",
       "   function renderPlot() {\n",
       "       if (fig === null) {\n",
       "           const plotSpec = {\n",
       "\"mapping\":{\n",
       "\"x\":\"vertical_category\",\n",
       "\"y\":\"y\",\n",
       "\"color\":\"vertical_category\",\n",
       "\"ymin\":\"ymin\",\n",
       "\"ymax\":\"ymax\"\n",
       "},\n",
       "\"data\":{\n",
       "\"ymin\":[0.0,5.0,5.0,0.0,20.0],\n",
       "\"ymax\":[20.0,20.0,20.0,2.0,22.0],\n",
       "\"y\":[null,6.0,19.0,1.0,21.0],\n",
       "\"value\":[20.0,15.0,15.0,2.0,2.0],\n",
       "\"vertical_category\":[\"Without midline\",\"Above midline\",\"Below midline\",\"Above bar\",\"Below bar\"]\n",
       "},\n",
       "\"kind\":\"plot\",\n",
       "\"scales\":[],\n",
       "\"layers\":[{\n",
       "\"mapping\":{\n",
       "},\n",
       "\"stat\":\"identity\",\n",
       "\"show_legend\":false,\n",
       "\"position\":\"dodge\",\n",
       "\"geom\":\"crossbar\",\n",
       "\"labels\":{\n",
       "\"variables\":[\"value\"],\n",
       "\"annotation_size\":20,\n",
       "\"use_layer_color\":true\n",
       "},\n",
       "\"data\":{\n",
       "}\n",
       "}],\n",
       "\"data_meta\":{\n",
       "\"series_annotations\":[{\n",
       "\"type\":\"str\",\n",
       "\"column\":\"vertical_category\"\n",
       "},{\n",
       "\"type\":\"str\",\n",
       "\"column\":\"horizontal_category\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"ymin\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"ymax\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"y\"\n",
       "},{\n",
       "\"type\":\"int\",\n",
       "\"column\":\"value\"\n",
       "}]\n",
       "},\n",
       "\"spec_id\":\"7\"\n",
       "};\n",
       "           window.letsPlotCall(function() { fig = LetsPlot.buildPlotFromProcessedSpecs(plotSpec, containerDiv, sizing); });\n",
       "       } else {\n",
       "           fig.updateView({});\n",
       "       }\n",
       "   }\n",
       "   \n",
       "   const renderImmediately = \n",
       "       forceImmediateRender || (\n",
       "           sizing.width_mode === 'FIXED' && \n",
       "           (sizing.height_mode === 'FIXED' || sizing.height_mode === 'SCALED')\n",
       "       );\n",
       "   \n",
       "   if (renderImmediately) {\n",
       "       renderPlot();\n",
       "   }\n",
       "   \n",
       "   if (!renderImmediately || responsive) {\n",
       "       // Set up observer for initial sizing or continuous monitoring\n",
       "       var observer = new ResizeObserver(function(entries) {\n",
       "           for (let entry of entries) {\n",
       "               if (entry.contentBoxSize && \n",
       "                   entry.contentBoxSize[0].inlineSize > 0) {\n",
       "                   if (!responsive && observer) {\n",
       "                       observer.disconnect();\n",
       "                       observer = null;\n",
       "                   }\n",
       "                   renderPlot();\n",
       "                   if (!responsive) {\n",
       "                       break;\n",
       "                   }\n",
       "               }\n",
       "           }\n",
       "       });\n",
       "       \n",
       "       observer.observe(containerDiv);\n",
       "   }\n",
       "   \n",
       "   // ----------\n",
       "   })();\n",
       "   \n",
       "   </script>                <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" display=\"block\" class=\"plt-container\" id=ad428b91-4a0b-480d-a00f-dfc1cd7f0063 width=\"100%\" height=\"100%\" style=\"max-width: 600.0px; max-height: 400.0px;\" viewBox=\"0 0 600.0 400.0\" preserveAspectRatio=\"xMinYMin meet\">\n",
       "  <style type=\"text/css\">\n",
       "  .plt-container {\n",
       "   font-family: sans-serif;\n",
       "   user-select: none;\n",
       "   -webkit-user-select: none;\n",
       "   -moz-user-select: none;\n",
       "   -ms-user-select: none;\n",
       "}\n",
       "text {\n",
       "   text-rendering: optimizeLegibility;\n",
       "}\n",
       "#pC9DBHS .plot-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 16.0px;\n",
       "\n",
       "}\n",
       "#pC9DBHS .plot-subtitle {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pC9DBHS .plot-caption {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pC9DBHS .hyperlink-element {\n",
       "fill: #118ed8;\n",
       "font-weight: normal;\n",
       "   font-style: normal;\n",
       "}\n",
       "#pC9DBHS .legend-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pC9DBHS .legend-item {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pC9DBHS .axis-title-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pC9DBHS .axis-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dxgU3yp .axis-tooltip-text-x {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pC9DBHS .axis-title-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pC9DBHS .axis-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dxgU3yp .axis-tooltip-text-y {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pC9DBHS .facet-strip-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pC9DBHS .facet-strip-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dxgU3yp .tooltip-text {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dxgU3yp .tooltip-title {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dxgU3yp .tooltip-label {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "   font-style: normal;font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "\n",
       "  </style>\n",
       "  <g id=\"pC9DBHS\">\n",
       "    <path fill-rule=\"evenodd\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" d=\"M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z\">\n",
       "    </path>\n",
       "    <g transform=\"translate(21.0 6.0 ) \">\n",
       "      <g>\n",
       "        <g transform=\"translate(17.961210910936405 0.0 ) \">\n",
       "          <g>\n",
       "            <line x1=\"68.07079488828138\" y1=\"0.0\" x2=\"68.07079488828138\" y2=\"338.4\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"172.7950947164066\" y1=\"0.0\" x2=\"172.7950947164066\" y2=\"338.4\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"277.5193945445318\" y1=\"0.0\" x2=\"277.5193945445318\" y2=\"338.4\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"382.243694372657\" y1=\"0.0\" x2=\"382.243694372657\" y2=\"338.4\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"486.9679942007822\" y1=\"0.0\" x2=\"486.9679942007822\" y2=\"338.4\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "          </g>\n",
       "        </g>\n",
       "        <g transform=\"translate(17.961210910936405 0.0 ) \">\n",
       "          <g>\n",
       "            <line x1=\"0.0\" y1=\"323.0181818181818\" x2=\"555.0387890890636\" y2=\"323.0181818181818\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"253.100826446281\" x2=\"555.0387890890636\" y2=\"253.100826446281\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"183.18347107438018\" x2=\"555.0387890890636\" y2=\"183.18347107438018\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"113.26611570247937\" x2=\"555.0387890890636\" y2=\"113.26611570247937\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"43.34876033057856\" x2=\"555.0387890890636\" y2=\"43.34876033057856\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "      <g clip-path=\"url(#cz11reR)\" clip-bounds-jfx=\"[rect (17.961210910936405, 0.0), (555.0387890890636, 338.4)]\">\n",
       "        <g transform=\"translate(17.961210910936405 0.0 ) \">\n",
       "          <g>\n",
       "            <g>\n",
       "              <rect x=\"20.944859965625042\" y=\"43.34876033057856\" height=\"279.66942148760324\" width=\"94.25186984531268\" stroke=\"rgb(228,26,28)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"125.66915979375025\" y=\"43.34876033057856\" height=\"209.75206611570243\" width=\"94.25186984531271\" stroke=\"rgb(55,126,184)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"230.39345962187542\" y=\"43.34876033057856\" height=\"209.75206611570243\" width=\"94.25186984531274\" stroke=\"rgb(77,175,74)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"335.1177594500006\" y=\"295.0512396694215\" height=\"27.966942148760324\" width=\"94.25186984531268\" stroke=\"rgb(152,78,163)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <rect x=\"439.8420592781258\" y=\"15.381818181818232\" height=\"27.966942148760324\" width=\"94.25186984531274\" stroke=\"rgb(255,127,0)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke-width=\"1.6500000000000001\">\n",
       "              </rect>\n",
       "              <line x1=\"125.66915979375025\" y1=\"239.11735537190083\" x2=\"219.9210296390629\" y2=\"239.11735537190083\" stroke=\"rgb(55,126,184)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <line x1=\"230.39345962187542\" y1=\"57.33223140495875\" x2=\"324.64532946718816\" y2=\"57.33223140495875\" stroke=\"rgb(77,175,74)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <line x1=\"335.1177594500006\" y1=\"309.0347107438016\" x2=\"429.36962929531336\" y2=\"309.0347107438016\" stroke=\"rgb(152,78,163)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <line x1=\"439.8420592781258\" y1=\"29.365289256198366\" x2=\"534.0939291234386\" y2=\"29.365289256198366\" stroke=\"rgb(255,127,0)\" stroke-opacity=\"1.0\" fill=\"none\" stroke-width=\"4.125\">\n",
       "              </line>\n",
       "              <g transform=\"rotate(0.0 486.9679942007822 53.34876033057856 ) \">\n",
       "                <path d=\"M490.10692147421923 73.34876033057856 C490.10692147421923 73.34876033057856 493.10692147421923 73.34876033057856 493.10692147421923 70.34876033057856 L493.10692147421923 56.34876033057856 C493.10692147421923 56.34876033057856 493.10692147421923 53.34876033057856 490.10692147421923 53.34876033057856 L483.8290669273451 53.34876033057856 C483.8290669273451 53.34876033057856 480.8290669273451 53.34876033057856 480.8290669273451 56.34876033057856 L480.8290669273451 70.34876033057856 C480.8290669273451 70.34876033057856 480.8290669273451 73.34876033057856 483.8290669273451 73.34876033057856 Z\" stroke=\"rgb(255,127,0)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.75\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(486.9679942007822 69.34876033057856 ) \">\n",
       "                  <text style=\"fill:#ff7f00;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>2</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 382.24369437265693 265.0512396694215 ) \">\n",
       "                <path d=\"M385.382621646094 285.0512396694215 C385.382621646094 285.0512396694215 388.382621646094 285.0512396694215 388.382621646094 282.0512396694215 L388.382621646094 268.0512396694215 C388.382621646094 268.0512396694215 388.382621646094 265.0512396694215 385.382621646094 265.0512396694215 L379.1047670992198 265.0512396694215 C379.1047670992198 265.0512396694215 376.1047670992198 265.0512396694215 376.1047670992198 268.0512396694215 L376.1047670992198 282.0512396694215 C376.1047670992198 282.0512396694215 376.1047670992198 285.0512396694215 379.1047670992198 285.0512396694215 Z\" stroke=\"rgb(152,78,163)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.75\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(382.24369437265693 281.0512396694215 ) \">\n",
       "                  <text style=\"fill:#984ea3;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>2</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 172.7950947164066 130.2018078512397 ) \">\n",
       "                <path d=\"M182.07294926328075 150.2018078512397 C182.07294926328075 150.2018078512397 185.07294926328075 150.2018078512397 185.07294926328075 147.2018078512397 L185.07294926328075 133.2018078512397 C185.07294926328075 133.2018078512397 185.07294926328075 130.2018078512397 182.07294926328075 130.2018078512397 L163.51724016953244 130.2018078512397 C163.51724016953244 130.2018078512397 160.51724016953244 130.2018078512397 160.51724016953244 133.2018078512397 L160.51724016953244 147.2018078512397 C160.51724016953244 147.2018078512397 160.51724016953244 150.2018078512397 163.51724016953244 150.2018078512397 Z\" stroke=\"rgb(55,126,184)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.0\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(172.7950947164066 146.2018078512397 ) \">\n",
       "                  <text style=\"fill:#377eb8;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>15</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 68.07079488828138 173.18347107438018 ) \">\n",
       "                <path d=\"M77.34864943515554 193.18347107438018 C77.34864943515554 193.18347107438018 80.34864943515554 193.18347107438018 80.34864943515554 190.18347107438018 L80.34864943515554 176.18347107438018 C80.34864943515554 176.18347107438018 80.34864943515554 173.18347107438018 77.34864943515554 173.18347107438018 L58.792940341407224 173.18347107438018 C58.792940341407224 173.18347107438018 55.792940341407224 173.18347107438018 55.792940341407224 176.18347107438018 L55.792940341407224 190.18347107438018 C55.792940341407224 190.18347107438018 55.792940341407224 193.18347107438018 58.792940341407224 193.18347107438018 Z\" stroke=\"rgb(228,26,28)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.0\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(68.07079488828138 189.18347107438018 ) \">\n",
       "                  <text style=\"fill:#e41a1c;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>20</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"rotate(0.0 277.5193945445318 146.24777892561985 ) \">\n",
       "                <path d=\"M286.79724909140594 166.24777892561985 C286.79724909140594 166.24777892561985 289.79724909140594 166.24777892561985 289.79724909140594 163.24777892561985 L289.79724909140594 149.24777892561985 C289.79724909140594 149.24777892561985 289.79724909140594 146.24777892561985 286.79724909140594 146.24777892561985 L268.24153999765764 146.24777892561985 C268.24153999765764 146.24777892561985 265.24153999765764 146.24777892561985 265.24153999765764 149.24777892561985 L265.24153999765764 163.24777892561985 C265.24153999765764 163.24777892561985 265.24153999765764 166.24777892561985 268.24153999765764 166.24777892561985 Z\" stroke=\"rgb(77,175,74)\" stroke-opacity=\"1.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"0.0\" stroke-width=\"0.0\">\n",
       "                </path>\n",
       "                <g transform=\"translate(277.5193945445318 162.24777892561985 ) \">\n",
       "                  <text style=\"fill:#4daf4a;font-size:20.0px;font-family:sans-serif;\" fill-opacity=\"1.0\" y=\"0.0\" text-anchor=\"middle\">\n",
       "                    <tspan>15</tspan>\n",
       "                  </text>\n",
       "                </g>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "        <defs>\n",
       "          <clipPath id=\"cz11reR\">\n",
       "            <rect x=\"17.961210910936405\" y=\"0.0\" width=\"555.0387890890636\" height=\"338.4\">\n",
       "            </rect>\n",
       "          </clipPath>\n",
       "        </defs>\n",
       "      </g>\n",
       "      <g>\n",
       "        <g transform=\"translate(17.961210910936405 338.4 ) \">\n",
       "          <g transform=\"translate(68.07079488828138 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 6.0 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>Without midline</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(172.7950947164066 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 21.6 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>Above midline</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(277.5193945445318 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 6.0 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>Below midline</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(382.243694372657 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 21.6 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>Above bar</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(486.9679942007822 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 6.0 ) \">\n",
       "              <text class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\" y=\"0.0\">\n",
       "                <tspan>Below bar</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <line x1=\"0.0\" y1=\"0.0\" x2=\"555.0387890890636\" y2=\"0.0\" stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\">\n",
       "          </line>\n",
       "        </g>\n",
       "        <g transform=\"translate(17.961210910936405 0.0 ) \">\n",
       "          <g transform=\"translate(0.0 323.0181818181818 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>0</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 253.100826446281 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>5</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 183.18347107438018 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>10</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 113.26611570247937 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>15</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 43.34876033057856 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\" y=\"0.0\">\n",
       "                <tspan>20</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "    </g>\n",
       "    <g transform=\"translate(15.0 175.2 ) rotate(-90.0 ) \">\n",
       "      <text class=\"axis-title-y\" y=\"0.0\" text-anchor=\"middle\">\n",
       "        <tspan>y</tspan>\n",
       "      </text>\n",
       "    </g>\n",
       "    <g transform=\"translate(316.4806054554682 394.0 ) \">\n",
       "      <text class=\"axis-title-x\" y=\"0.0\" text-anchor=\"middle\">\n",
       "        <tspan>vertical_category</tspan>\n",
       "      </text>\n",
       "    </g>\n",
       "    <path fill=\"rgb(0,0,0)\" fill-opacity=\"0.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" d=\"M0.0 0.0 L0.0 400.0 L600.0 400.0 L600.0 0.0 Z\" pointer-events=\"none\">\n",
       "    </path>\n",
       "  </g>\n",
       "  <g id=\"dxgU3yp\">\n",
       "  </g>\n",
       "</svg>\n",
       "                <script>document.getElementById(\"ad428b91-4a0b-480d-a00f-dfc1cd7f0063\").style.display = \"none\";</script>"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "letsPlot(data) {\n",
    "    x = \"vertical_category\"\n",
    "    y = \"y\"\n",
    "    ymin = \"ymin\"\n",
    "    ymax = \"ymax\"\n",
    "    color = \"vertical_category\"\n",
    "} + geomCrossbar(\n",
    "    showLegend = false,\n",
    "    labels = layerLabels(\"value\")\n",
    "        .size(20)\n",
    "        .inheritColor()            // <--- Enable using the geometry color in labels.\n",
    ")"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Kotlin",
   "language": "kotlin",
   "name": "kotlin"
  },
  "language_info": {
   "codemirror_mode": "text/x-kotlin",
   "file_extension": ".kt",
   "mimetype": "text/x-kotlin",
   "name": "kotlin",
   "nbconvert_exporter": "",
   "pygments_lexer": "kotlin",
   "version": "1.9.23"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
